<template>
    <div class="view-body">
        <div class="paddingLR15 white-bg bottom-shadow" style="height: 44px;margin-bottom: 2px; overflow: hidden;">
            <ul class="clearfix word-btn-list-02">
                <li class="color666" @click="selectSort(0)" :class="{'cur': index == 0}">{{ $t("status_pending_approval") }}</li><!--待审批-->
                <li class="color666" @click="selectSort(1)" :class="{'cur': index == 1}">{{ $t("status_approved") }}</li><!--已审批-->
                <li class="color666" @click="selectSort(2)" :class="{'cur': index == 2}">{{ $t("approve_status_1") }}</li><!--已拒绝-->
            </ul>
        </div>
        <div style="height: calc(100% - 50px);" class="body-content" :class="{'height-100' : total === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getDataList"
                >
                    <div class="font-size12" style="background: #fafafa;padding: 14px 15px;">
                        <i class="point-icon"></i>
                        <span v-if="index == 0 || index == 1">{{ $t("knowledge_share_tips_1") }}</span><!--分享的知识审批通过并发布后，才能在知识列表中查看-->
                        <span v-if="index == 2">{{ $t("knowledge_share_tips_2") }}</span><!--已拒绝的知识修改成功后会重新进入审批流程-->
                    </div>
                    <div v-bind:class="{'height100' : total === 0}">
                        <ul class="white-bg module-list-11">
                            <li class="clearfix" v-for="list in knowledgeList" :key="list.kbi_id">
                                <div @click="detatilJump(list.kbi_id)">
                                    <span class="img-box" v-if="index == 0 || index == 2">
                                        <img :src="appUrl + list.imageAttachment.kba_url" alt="" width="100%"/>
                                    </span>
                                    <span class="img-box status-box" v-if="index == 1">
                                        <img :src="appUrl + list.imageAttachment.kba_url" alt="" width="100%"/>
                                        <span>{{ list.kbi_status === 'ON' ? $t('lab_published') : $t('lab_unpublished') }}</span><!--已发布/未发布-->
                                    </span>
                                    <div class="contents-box">
                                        <p class="word-clamp-2 font-size14"><span class="color999">{{ $t(list.kbi_type) }}</span><em class="point"></em>{{ list.kbi_title }}</p>
                                        <p class="color999 font-size11" style="margin-top: 7px;" v-if="index == 0"><!--待审批-->
                                            {{ list.kbi_create_datetime | substringTime }}{{ $t("knowledge_share_add") }}
                                        </p>
                                        <p class="color999 font-size11" style="margin-top: 7px;" v-if="index == 1"><!--已审批-->
                                            {{ list.kbi_create_datetime | substringTime }}{{ $t("knowledge_share_add") }}<em class="point"></em>{{ list.kbi_approve_datetime | substringTime }}{{ $t("status_approved") }}
                                        </p>
                                        <p class="color999 font-size11" style="margin-top: 7px;" v-if="index == 2"><!--已拒绝-->
                                            {{ list.kbi_create_datetime | substringTime }}{{ $t("knowledge_share_add") }}<em class="point"></em>{{ list.kbi_approve_datetime | substringTime }}{{ $t("approve_status_1") }}
                                        </p>
                                    </div>
                                </div>
                                <div v-if="index == 0 || index == 2">
                                    <i class="delete-icon" style="float: right;padding:10px 10px 0 0;margin:0 0 0 10px;" v-if="index == 2" @click="deleteReply(list.kbi_id)"></i>
                                    <i class="edit-icon" style="float: right;padding: 10px 10px 0 0;" @click="jumpEditShare(list.kbi_type, list.kbi_id)"></i>
                                </div>
                            </li>
                        </ul>
                        <div class="bottom-shadow" style="height: 1px;margin-top: -1px;" v-if="total > 0"></div>
                        <!--暂无数据-->
                        <div v-if="!isLoading && total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t('no_data') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <common-loading :isLoading="isLoading"></common-loading>
                    </div>
                </van-list>
            </van-pull-refresh>
            <van-dialog
            v-model="submitOk"
            show-cancel-button
            :title="$t('knowledge_share_tips_3')"
            :cancelButtonText="$t('cancel')"
            :confirm-button-text="$t('sure')"
            @confirm="deleteConfirm"
            >
            </van-dialog>
        </div>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
export default {
    name: 'MySharing',
    components: {
        CommonLoading
    },
    data() {
        return {
            pageNo: 1, //分页页码
            knowledgeList: [], //知识列表
            total: 0,
            index: 0, //切换列表的index
            submitOk: false,
            kbi_app_status: 'PENDING', //默认待审批列表
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        selectSort(index) {
            this.index = index;
            this.knowledgeList = [];
            this.pageNo = 1;
            this.onFetching = false;
            this.isLoading = true;
            switch (index) {
            case 0:
                this.kbi_app_status = 'PENDING'; //待审批
                break;
            case 1:
                this.kbi_app_status = 'APPROVED'; //已审批
                break;
            case 2:
                this.kbi_app_status = 'REAPPROVAL'; //已拒绝
                break;
            };
            this.getDataList();
        },
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getDataList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getDataList(option) { //列表请求方法
            this.$axios({
                method: 'POST',
                url: '/app/kb/center/index/my_share',
                params: {
                    pageNo: this.pageNo,
                    kbi_app_status: this.kbi_app_status
                }
            }).then((res) => {
                if (res.data.rows && res.data.rows.length !== 0) {
                    if (option && option === 'refresh') {
                        this.knowledgeList = res.data.rows;
                    } else {
                        this.knowledgeList = [...this.knowledgeList, ...res.data.rows];
                    }
                }
                this.total = res.data.total;
                this.isLoading = false;
                this.pageNo++;
                if (this.knowledgeList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        detatilJump(id) {
            let kbiId = this.wbEncryptor(id);
            this.$router.push({path: `/knowledgeDetail/${kbiId}`});
        },
        deleteReply(id) {
            this.submitOk = true;
            this.deleteRelpyObj = {id};
        },
        //删除确认层--确定
        deleteConfirm() {
            let {id} = this.deleteRelpyObj;
            this.$axios({
                method: 'GET',
                url: '/app/kb/admin/delete?kbi_id=' + id
            }).then((res) => {
                this.knowledgeList = [];
                this.pageNo = 1;
                this.getDataList();
            });
        },
        /*跳转到编辑页面*/
        jumpEditShare(type, kbiId) {
            let knowledgeType = type === 'ARTICLE' ? type : 'FILES';
            this.$router.push({path: '/editShare', query: {knowledgeType, kbiId}});
        }
    },
    mounted() {
        //知识列表加载
        this.getDataList();
    }
};
</script>

<style scoped>
    .word-btn-list-02 {
        height: 50px;
        overflow-x: scroll;
        display: -webkit-box;
    }
    .word-btn-list-02 li {
        height: 41px;
        line-height: 42px;
        font-size: 16px;
        margin-right: 50px;
        border-bottom: 3px solid #ffffff;
    }
    .word-btn-list-02 li.cur {
         color: #075ebb;
        border-color: #075ebb;
    }
    .point-icon {
        width: 22px;
        height: 16px;
        background-position: 2px -4px;
        display: inline-block;
        margin-bottom: -3px;
    }
    .edit-icon:before {
        content:"";
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(./images/edit-icon.png) no-repeat 5px 3px;
        background-size: 14px;
    }
    .status-box {
        position: relative;
    }
    .status-box span {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.5);
        color: #ffffff;
        text-align: center;
        font-size: 12px;
        line-height: 58px;
    }
</style>
